今天我們來聊聊 CloudFlare Workers 的路由設定。這個東西其實蠻重要的，因為它可以幫我們處理不同的 HTTP 請求，讓我們的 Worker 變得更有條理。

先來看看我們的程式碼吧！這次我們要介紹的是一個叫做 Router 的類別，還有一些處理 CORS 的函數。以下是code:

    import { handleCORS, corsHeaders } from './corsHandler.js';

    class Router {
        constructor() {
            this.routes = new Map();
        }

        get(path, handler) {
            this.addRoute('GET', path, handler);
        }

        post(path, handler) {
            this.addRoute('POST', path, handler);
        }

        options(path, handler) {
            this.addRoute('OPTIONS', path, handler);
        }

        addRoute(method, path, handler) {
            if (!this.routes.has(method)) {
                this.routes.set(method, new Map());
            }
            this.routes.get(method).set(path, handler);
        }

        async handle(request, env) {
            const method = request.method;
            const url = new URL(request.url);
            const path = url.pathname;

            // Handle CORS preflight requests
            if (method === 'OPTIONS') {
                return handleCORS(request);
            }

            const routeMap = this.routes.get(method);
            if (routeMap && routeMap.has(path)) {
                const handler = routeMap.get(path);
                return handler(request, env);
            }

            return new Response('Not Found', { status: 404, headers: corsHeaders(request) });
        }
    }

    export function corsHeaders(request) {
      const headers = {
        'Access-Control-Allow-Origin': '*', //這邊要改成來源域名
        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With, Authorization',
        'Access-Control-Allow-Credentials': 'true',
      };

      const origin = request.headers.get('Origin');
      if (origin) {
        headers['Access-Control-Allow-Origin'] = origin;
      }

      return headers;
    }

    export function handleCORS(request) {
      if (request.method === 'OPTIONS') {
        return new Response(null, {
          status: 204,
          headers: corsHeaders(request)
        });
      }
      
      return null;
    }

首先，我們有一個 Router 類別。這個類別是幹嘛的呢？它就像是一個交通警察，負責指揮不同的 HTTP 請求該去哪裡。

我們可以用 get、post 和 options 這些方法來設定不同的路由。比如說，如果我們想要處理 GET 請求，就可以這樣寫：

router.get('/hello', (request) => new Response('你好啊！'));

這樣一來，當有人訪問 /hello 這個路徑的時候，就會得到「你好啊！」這個回應。

再來看看 handle 方法。這個方法是整個 Router 的核心，它負責處理所有進來的請求。它會先檢查是不是 CORS 的預檢請求（OPTIONS 方法），如果是的話就用 handleCORS 來處理。如果不是，它就會找找看有沒有對應的處理函數，有的話就執行，沒有的話就回傳 404 錯誤。

最後，我們還有兩個處理 CORS 的函數：corsHeaders 和 handleCORS。CORS 是啥？它是「跨來源資源共用」的縮寫，用來讓不同網域的網頁可以安全地互相存取資源。這兩個函數就是在幫我們處理這些跨域請求的問題。

總結一下，這個 Router 類別讓我們可以很方便地設定不同的路由，而且還幫我們處理了 CORS 的問題。
如果我有任何錯誤，歡迎在留言區一起討論！